<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    h3 {
      line-height: 60px;
    }

    li {
      line-height: 40px;
      border: 1px dashed #333;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <h3 id="title">批量操作元素</h3>
    <ul class="list">
      <li>01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
      <li>05</li>
      <li>06</li>
    </ul>
    <input type="text" class="demo">
  </div>
</body>
<script>
  // 面向过程

  // 操作 -> 单元素 => 直接操作
  // var title = document.getElementById("title");
  // console.log(title.innerHTML);
  // title.innerHTML = "标题";

  // 操作 -> 多元素 => 遍历获取 在操作
  // var liList = document.querySelectorAll(".list li");
  // for (var i = 0; i < liList.length; i++) {
  //     var li = liList[i];
  //     li.innerHTML = "123123";
  // }

  // => 批量操作元素 => 有可能是单元素,多元素  => 方法有区别
  // 使用 document.querySelectorAll()  无论是单元素获取还是多元素 => 都会存放到集合中

  // var eles = document.querySelectorAll("#title");
  // var eles = document.querySelectorAll(".list li");


  //设置
  // function setHtml(con) {
  //   for (var i = 0; i < eles.length; i++) {
  //     var li = eles[i];
  //     li.innerHTML = con;
  //   }
  // }

  // // 获取
  // // function getHtml() {
  // //   var list = [];
  // //   for (var i = 0; i < eles.length; i++) {
  // //     var li = eles[i];
  // //     list.push(li.innerHTML);
  // //   }
  // //   return list;

  // // }

  // function getHtml() {
  //   return eles[0].innerHTML;
  // }

  // // setHtml("冲波");

  // console.log(getHtml());




  // var getEle = {
  //   eles: document.querySelectorAll(".list li"),

  //   // setHtml(con) {
  //   //   for (var i = 0; i < this.eles.length; i++) {
  //   //     var li = eles[i];
  //   //     li.innerHTML = con;
  //   //   }
  //   // },
  //   // getHtml() {
  //   //   return this.eles[0].innerHTML;
  //   // },

  //   html: function (con) {
  //     if (arguments.length >= 1) {
  //       for (var i = 0; i < this.eles.length; i++) {
  //         var li = eles[i];
  //         li.innerHTML = con;
  //       }
  //     } else {
  //       return this.eles[0].innerHTML;
  //     }
  //   }

  // }

  // // getEle.setHtml("123123");
  // // console.log(getEle.getHtml());

  // getEle.html("123123");
  // console.log(getEle.html());




  // function GetEle(selector) {
  //   var obj = {
  //     eles: document.querySelectorAll(selector),

  //     // setHtml(con) {
  //     //   for (var i = 0; i < this.eles.length; i++) {
  //     //     var li = eles[i];
  //     //     li.innerHTML = con;
  //     //   }
  //     // },
  //     // getHtml() {
  //     //   return this.eles[0].innerHTML;
  //     // },

  //     html: function (con) {
  //       if (arguments.length >= 1) {
  //         for (var i = 0; i < this.eles.length; i++) {
  //           var li = eles[i];
  //           li.innerHTML = con;
  //         }
  //       } else {
  //         return this.eles[0].innerHTML;
  //       }
  //     }

  //   }
  //   return obj;
  // }

  // var $title = GetEle("#title");
  // console.log($title);
  // $title.html("1111111");

  // var $li = GetEle(".list li");
  // console.log($li);
  // $li.html("波波波");




  function GetEle(selector) {

    this.eles = document.querySelectorAll(selector);

  }

  GetEle.prototype.html = function (con) {


    if (arguments.length >= 1) {
      for (var i = 0; i < this.eles.length; i++) {
        var ele = this.eles[i];
        ele.innerHTML = con;
      }
    } else {
      return this.eles[0].innerHTML;
    }

  }

  GetEle.prototype.html = function (con) {


    if (arguments.length >= 1) {
      for (var i = 0; i < this.eles.length; i++) {
        var ele = this.eles[i];
        ele.innerText = con;
      }
    } else {
      return this.eles[0].innerText;
    }

  }

  GetEle.prototype.val = function (con) {


    if (arguments.length >= 1) {
      for (var i = 0; i < this.eles.length; i++) {
        var ele = this.eles[i];
        ele.value = con;
      }
    } else {
      return this.eles[0].value;
    }

  }

  var $title = new GetEle("#title");
  console.log($title);
  $title.html("1111111");

  var $li = new GetEle(".list li");
  console.log($li);
  $li.html("波波波");


  var $demo = new GetEle(".demo");
  console.log($demo);
  $demo.val("周冲波")


</script>

</html>